<template>
  <div class="goodDetail">
    <comHeader></comHeader>
    <div class="goodDetail-content">
      <div class="goodDetail-content-header">
        <div>{{ goodDetail.borrowDay }}天</div>
        <p>{{ goodDetail.borrowName }}</p>
      </div>
      <div class="goodDetail-content-lendRate">
        <div>
          <strong>{{ goodDetail.borrowRate }}</strong>
          <span v-if="goodDetail.borrowAwardRate != 0 && isNewer">+{{ goodDetail.borrowAwardRate }}</span>
        </div>
        <span>借款利率(%)</span>
      </div>
      <div class="goodDetail-content-progress">
        <div class="progress-bar">
          <div class="amount" :style="{width: Percentage + '%'}"></div>
          <div class="circle"></div>
        </div>
        <div class="progress-value">
          {{ Percentage }}%
        </div>
      </div>
      <ul class="goodDetail-content-list border-1px">
        <li>
          <p>{{ goodDetail.borrowDay }}</p>
          <span>出借期限(天)</span>
        </li>
        <li>
          <p>{{ formatInvestMoney[0] }}.<span>{{ formatInvestMoney[1] }}</span></p>
          <span>可投金额(万元)</span>
        </li>
        <li>
          <p>{{ (Number(goodDetail.borrowMoney) / 10000).toFixed(2) }}<span></span></p>
          <span>融资金额(万元)</span>
        </li>
      </ul>

      <ul class="goodDetail-content-timeDetail">
        <li>发布日期：{{ String(goodDetail.borrowOnlineDate).split(' ')[0] }}</li>
        <li>还款日期：{{ String(goodDetail.payBackDate).split(' ')[0] }}</li>
        <li v-if="goodDetail.borrowStatus === '4'">剩余时间：{{ dd }}天{{ hh }}时{{ mm }}分{{ ss }}秒</li>
        <li v-else>剩余时间：00天00时00分00秒</li>
        <li>计息方式：{{ repayMode }}</li>
      </ul>
      <spliter></spliter>
      <div class="goodDetail-content-steps">
        <ul>
          <li :style="{color: goodStatus >=4 ? '#ff4133' : '#999'}">
            <span class="icon-date"></span>
            <p>预计起息日</p>
            <p>{{ String(goodDetail.paymentDate).split(' ')[0] }}</p>
          </li>
          <li :style="{color: goodStatus >=5 ? '#ff4133' : '#999'}">
            <span class="icon-money"></span>
            <p>拼命赚钱</p>
            <p>收益快速增长中</p>
          </li>
          <li :style="{color: goodStatus >=6 ? '#ff4133' : '#999'}">
            <span class="icon-expire"></span>
            <p>预计到期日</p>
            <p>{{ String(goodDetail.payBackDate).split(' ')[0] }}</p>
          </li>
        </ul>
      </div>
      <spliter></spliter>
      <investDetail></investDetail>
    </div>
    <div class="padding-height"></div>
    <div class="goodDetail-footer">
      <div class="border border-1px"></div>

      <div v-if="goodDetail.borrowStatus !== '4'">
        <div v-if="goodDetail.borrowStatus === '5'">
          <comBtn text="已满标" bgColor="#e5e5e5"></comBtn>
        </div>
        <div v-if="goodDetail.borrowStatus === '6'">
          <comBtn text="正在回款中" bgColor="#e5e5e5"></comBtn>
        </div>
        <div v-if="goodDetail.borrowStatus === '7'">
          <comBtn text="回款已完成" bgColor="#e5e5e5"></comBtn>
        </div>
      </div>

      <div v-else>
        <div v-if="!isLogin" @click.stop="toLogin">
          <comBtn text="立即登录"></comBtn>
        </div>
        <div v-if="isLogin && !isOpenAcct" @click.stop="toOpenAcct">
          <p>实名认证之后才能出借</p>
          <comBtn text="立即认证"></comBtn>
        </div>
        <div v-if="isLogin && isOpenAcct && !isOpenAuth" @click.stop="toOpenAuth">
          <p>签署之后才能出借</p>
          <comBtn text="立即签署"></comBtn>
        </div>
        <div v-if="isLogin && isOpenAcct && isOpenAuth" @click.stop="toInvestMent">
          <p>账户可用余额：<span>{{ balance }}</span> 元</p>
          <comBtn text="立即出借"></comBtn>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import comHeader from 'components/common/comHead'
  import spliter from 'components/common/spliter'
  import investDetail from 'components/investDetail'
  import comBtn from 'components/common/comBtn'
  const TWEEN = require('tween.js')

  export default {
    data () {
      return {
        goodDetail: {},
        restEvent: null,
        subjectStatus: 5,
        dd: 0,
        hh: 0,
        mm: 0,
        ss: 0,
        tween: null,
        animate: null,
        requestAnimationFrame: null
      }
    },
    computed: {
      isNewer () {
        if (this.$cookie.get('acctKey')) {
          return this.$store.state.user.memberInvestor === '0'
        } else {
          return true
        }
      },
      Percentage () {
        const perMoney = (Number(this.goodDetail.borrowTransferMoney) / Number(this.goodDetail.borrowMoney)) * 100
        const per = Number(perMoney.toFixed(0)) // 百分比数值
        if (per === 100 && this.goodDetail.borrowTransferMoney === this.goodDetail.borrowMoney) {
          return 100
        } else if (per === 100 && this.goodDetail.borrowTransferMoney !== this.goodDetail.borrowMoney) { // 进位，但是投资实际投资不为100%，按99%算
          return 99
        } else {
          return per
        }
      },
      formatInvestMoney () {
        const investableMoney = this.goodDetail.borrowMoney - this.goodDetail.borrowTransferMoney
        const transformMoney = (investableMoney / 10000).toFixed(2) // 转换为XX.XX万元，保留两位小数
        const splitMoney = transformMoney.split('.') // 分割维数组，主要用于UI展示，小数后面的样式不一样
        return splitMoney
      },
      repayMode () {
        if (this.goodDetail.borrowRepayment === '2') {
          return '按月付息，到期还本'
        }
      },
      goodStatus () {
        return this.goodDetail.borrowStatus
      },
      // 是否登陆
      isLogin () {
        if (this.getUserCookie('acctKey')) {
          return true
        } else {
          return false
        }
      },
      // 是否认证 || 开户
      isOpenAcct () {
        const openAcct = this.$store.state.user.openAcctStatus
        if (openAcct === '0') {
          return false
        } else {
          return true
        }
      },
      // 是否签署
      isOpenAuth () {
        const openAuth = this.$store.state.user.openAuthStatus
        if (openAuth === '0') {
          return false
        } else {
          return true
        }
      },
      balance () {
        return this.$store.state.user.balance.toFixed(2)
      }
    },
    methods: {
      toLogin () {
        // 立即登陆
        this.$router.push('/login')
      },
      toOpenAcct () {
        // 实名认证
        this.$router.push('/certificate')
      },
      toOpenAuth () {
        // 立即签署
        this.$router.push('/goSign')
      },
      toInvestMent () {
        // 立即投资
        this.$router.push(`/investmentDetail/${this.$route.params.borrowOrder}`)
      }
    },
    created () {
      const acctKey = this.getUserCookie('acctKey')
      if (!acctKey) {
        this.acctKey = ''
      } else {
        this.acctKey = acctKey
      }
      // 签署成功后，实名认证后更新userInfo信息
      if (acctKey) {
        this.$store.dispatch('userInfo', acctKey)
      }
      window.scrollTo(0, 0) // home页面点击标的详情页的时候回到顶部
      this.$http.get(`/api/borrow/borrowInfo/view?borrowOrder=${this.$route.params.borrowOrder}`)
        .then((res) => {
          if (res.data.success) {
            this.goodDetail = res.data.data
            console.log(this.goodDetail)
            this.goodDetail.borrowRate = Number(this.goodDetail.borrowRate)
            this.goodDetail.borrowAwardRate = Number(this.goodDetail.borrowAwardRate)
            // 获取数据后 -> 进行数字状态动画
            const vm = this
            this.animate = function () {
              requestAnimationFrame(vm.animate)
              TWEEN.update()
            }
            this.tween = new TWEEN.Tween({ tweeningNumber: 0, tweenRewardRate: 0 })
              .easing(TWEEN.Easing.Quadratic.Out)
              .to({ tweeningNumber: Number(vm.goodDetail.borrowRate), tweenRewardRate: Number(vm.goodDetail.borrowAwardRate) }, 2000)
              .onUpdate(function () {
                vm.goodDetail.borrowRate = Number(this.tweeningNumber).toFixed(2)
                vm.goodDetail.borrowAwardRate = Number(this.tweenRewardRate).toFixed(2)
              })
              .start()
            this.animate()
          }
        })
    },
    mounted () {
      this.restEvent = setInterval(() => {
        const time = new Date(this.goodDetail.overDate) - Date.now()
        if (time > 0) {
          this.dd = parseInt(time / 1000 / 60 / 60 / 24, 10) // 计算剩余的天数
          this.hh = parseInt(time / 1000 / 60 / 60 % 24, 10) // 计算剩余的小时数
          this.mm = parseInt(time / 1000 / 60 % 60, 10) // 计算剩余的分钟数
          this.ss = parseInt(time / 1000 % 60, 10) // 计算剩余的秒数
        } else {
          this.dd = 0
          this.hh = 0
          this.mm = 0
          this.ss = 0
          window.clearInterval(this.restEvent)
        }
      }, 1000)
    },
    destroyed () {
      // 重复加载几次页面，内存占用走高，内存泄漏
      clearInterval(this.restEvent)
      this.tween = null
      this.restEvent = null
    },
    components: {
      comHeader,
      spliter,
      investDetail,
      comBtn
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .goodDetail {
    font-size: 24px;
    font-weight: normal;
    &-content {
      &-header {
        display: flex;
        margin-top: 30px;
        justify-content: center;
        & > div {
          box-sizing: border-box;
          width: 96px;
          height: 44px;
          margin-right: 20px;
          border-radius: 4px;
          font-size: 28px;
          line-height: 45px;
          color: $base-3fadf9;
          text-align: center;
          font-weight: normal;
          border: 1px solid #{$base-3fadf9};
        }
        & > p {
          height: 44px;
          font-size: 34px;
          line-height: 50px;
          color: $base-333;
        }
      }
      &-lendRate {
        margin-top: 50px;
        text-align: center;
        & > div {
          text-align: center;
          color: $base-ff6c00;
          margin-bottom: 30px;
          strong {
            font-size: 68px;
            font-weight: 400;
          }
          span {
            font-size: 48px;
            font-weight: bold;
          }
        }
        & > span {
          font-size: 30px;
          color: $base-666;
          font-weight: normal;
        }
      }
      &-progress {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-weight: normal;
        margin-top: 26px;
        .progress-bar {
          display: flex;
          width: 604px;
          height: 6px;
          border-radius: 3px;
          margin-right: 20px;
          background: $base-e5e5e5;
          .amount {
            height: 6px;
            width: 0px; // progressBar的长度
            background: $base-ff6c00;
            border-radius: 3px 0 0 3px;
            transition: all 2s ease;
          }
          .circle {
            position: relative;
            top: -4px;
            left: -2px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 6px solid $base-ff6c00;
            background: $base-fff;
            @media (-webkit-min-device-pixel-ratio: 1) {
              width: 6px;
              height: 6px;
              border-width: 6px;
            }
            @media (-webkit-min-device-pixel-ratio: 2) {
              top: -5px;
              width: 6px;
              height: 6px;
              border-width: 5px;
            }
            @media (-webkit-min-device-pixel-ratio: 3) {
              top: -4px;
              width: 6px;
              height: 6px;
              border-width: 6px;
            }
          }
        }
        .progress-value {
          margin-bottom: -10px;
          color: $base-999;
          font-size: 26px;
          font-weight: normal;
        }
      }
      &-list {
        display: flex;
        text-align: center;
        justify-content: space-around;
        align-items: flex-end;
        @include border-1px(#{$base-e5e5e5});
        li {
          margin-bottom: 40px;
          & > p {
            margin: 40px 0 30px 0;
            font-weight: normal;
            span {
              font-weight: normal;
            }
          }
          & > span {
            font-size: 28px;
            color: $base-666;
            font-weight: normal;
          }
        }
        li:nth-child(1) {
          p {
            font-size: 40px;
            color: $base-666;
          }
        }
        li:nth-child(2) {
          p {
            color: $base-ff6c00;
            font-size: 40px;
            span {
              font-size: 40px;
            }
          }
        }
        li:nth-child(3) {
          p {
            font-size: 40px;
            span {
              font-size: 40px;
            }
          }
        }
      }
      &-timeDetail {
        padding: 30px 30px;
        li {
          font-size: 26px;
          color: #666;
          line-height: 54px;
          font-weight: normal;
        }
      }
      &-steps {
        & > ul {
          display: flex;
          justify-content: space-around;
          text-align: center;
          margin: 40px 0 50px 0;
          font-size: 30px;
          color: $base-999;
          & > li {
            span {
              font-size: 40px;
            }
            p:nth-child(2) {
              margin-top: 30px;
            }
            p:nth-child(3) {
              margin-top: 20px;
              font-weight: normal;
            }
          }
        }
      }
    }
    .padding-height {
      height: 206px;
      background: $base-e5e5e5;
    }
    &-footer {
      .border {
        @include border-1px(#{$base-e5e5e5});
        &::after {
          height: 42px;
        }
      }
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 30px 0 30px 0;
      background: $base-fff;
      & > div {
        font-size: 24px;
        color: #666;
        p {
          text-indent: 30px;
          margin-bottom: 24px;
          span {
            font-size: 36px;
            color: $base-ff6c00;
          }
        }
      }
    }
  }
</style>
